{% extends 'html/base_template.html' %}

{% block top_script_section %}
    <script type="text/javascript">
        $(document).ready(function () {
            {% if type == 0 %}
                $("#id_0").click();
            {% elif type == 1 %}
                $("#id_1").click();
            {% elif type == 2 %}
                $("#id_2").click();
            {% endif %}
        });
    </script>
{% endblock %}
{% load static %}
{% load filter %}
{% block content_section %}

    {% if status == Status.kAccepted %}
        <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">游戏列表</h3>
        </div>
        <div class="panel-body">
            <script type="text/javascript">
                jQuery(document).ready(function ($) {

                   $("#example-2").dataTable({
                        dom: "t" + "<'row'<'col-xs-6'i><'col-xs-6'p>>",
                        aLengthMenu: [
                            [5, 25, 50, 100, -1], [10, 25, 50, 100, "All"]
                        ],
                        bProcessing: true,
                        bPaginate: true,
                        fnDraw: false,
                        bLengthChange: true,
                        bStateSave: false,
                        bServerSide: true,
                        sServerMethod: "POST",
                       sAjaxSource: "{{ urls.query }}",
                       fnServerParams: function (aoData) {
                           aoData.push({'name': 'status', 'value': {{ Status.kAccepted }}});
                       },
                        columns: [
{#                            {#}
{#                                bSortable: false, "render": function () {#}
{#                                return '<input type="checkbox" class="cbr">';#}
{#                            }#}
{#                            },#}
                            {"data": "index"},
                            {"data": "name"},
                            {"data": "category"},
                            {"data": "type"},
                            {"data": "paymode"},
                            {"data": "version"},
                            {"data": "stime"},
                            {
                                "data": "id", "render": function (obj, type, row, meta) {
                                return '<a href="{{ urls.query }}?id=' + obj + '" class="btn btn-secondary btn-sm btn-icon">查看</a>';
                            }
                            }
                        ],
                        language: {
                            "sProcessing": "处理中...",
                            "sLengthMenu": "每页显示 _MENU_ 条结果",
                            "sZeroRecords": "没有匹配结果",
                            "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 ,_TOTAL_条)",
                            "sInfoEmpty": "显示第 0 至 0 条结果，共 0 条",
                            "infoFiltered": "(从 _MAX_ 条记录过滤)",
                            "sInfoPostFix": "",
                            "sSearch": "模糊搜索:",
                            "sUrl": "",
                            "sEmptyTable": "表中数据为空",
                            "sLoadingRecords": "载入中...",
                            "sProcessing": "<img src='{% static 'assets/images/loding.gif'%}'/> 正在加载数据...",
                            "sInfoThousands": ",",
                            "oPaginate": {
                                "sFirst": "首页",
                                "sPrevious": "上页",
                                "sNext": "下页",
                                "sLast": "末页"
                            }
                        },
                    });
                });
            </script>
            <table class="table table-bordered table-striped" id="example-2"
                   name="id_data_table">
                <thead>
                <tr>
{#                    <th class="no-sorting">#}
{#                        <input type="checkbox" class="cbr">#}
{#                    </th>#}
                    <th></th>
                    <th>游戏名称</th>
                    <th>类型</th>
                    <th>基础分类</th>
                    <th>资费模式</th>
                    <th>游戏版本</th>
                    <th>上线时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody class="middle-align">
                </tbody>
            </table>
        </div>
    </div>
    {% else %}
        <div class="row">
        <div class="col-sm-12">
            <ul class="nav nav-tabs">
                <li class="active">
                    <a href="#home" data-toggle="tab" id="id_0">
                        <span class="visible-xs"><i class="fa-home"></i></span>
                        <span class="hidden-xs">待审核({{ Status.kInAuditing|get_num_of_games:user.id }})</span>
                    </a>
                </li>
                <li>
                    <a href="#profile" data-toggle="tab" id="id_1">
                        <span class="visible-xs"><i class="fa-user"></i></span>
                        <span class="hidden-xs">打回（{{ Status.kRejected|get_num_of_games:user.id }}）</span>
                    </a>
                </li>
                <li>
                    <a href="#messages" data-toggle="tab" id="id_2">
                        <span class="visible-xs"><i class="fa-envelope-o"></i></span>
                        <span class="hidden-xs">草稿（{{ Status.kCreated|get_num_of_games:user.id }}）</span>
                    </a>
                </li>
            </ul>
            <div class="tab-content tab-content_01">
                <div class="tab-pane active" id="home">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <script type="text/javascript">
                                jQuery(document).ready(function ($) {
                                    $("#example-1").dataTable({
                                        dom: "t" + "<'row'<'col-xs-6'i><'col-xs-6'p>>",
                                        aLengthMenu: [
                                            [5, 25, 50, 100, -1], [10, 25, 50, 100, "All"]
                                        ],
                                        bProcessing: true,
                                        bPaginate: true,
                                        fnDraw: false,
                                        bLengthChange: true,
                                        bStateSave: false,
                                        bServerSide: true,
                                        sServerMethod: "POST",
                                        sAjaxSource: "{{ urls.query }}",
                                        fnServerParams: function (aoData) {
                                            aoData.push({'name': 'status', 'value': {{ Status.kInAuditing }}});
                                        },
                                        columns: [
{#                                            {#}
{#                                                bSortable: false, "render": function () {#}
{#                                                return '<input type=\'checkbox\' class=\'cbr\'>';#}
{#                                            }#}
{#                                            },#}
                                            {"data": "index"},
                                            {"data": "name"},
                                            {"data": "category"},
                                            {"render": function(obj){return "提交类型";}},
                                            {"data": "stime"},
                                            {"render": function(obj){return "审核中"}}
                                        ],
                                        language: {
                                            "sProcessing": "处理中...",
                                            "sLengthMenu": "每页显示 _MENU_ 条结果",
                                            "sZeroRecords": "没有匹配结果",
                                            "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 ,_TOTAL_条)",
                                            "sInfoEmpty": "显示第 0 至 0 条结果，共 0 条",
                                            "infoFiltered": "(从 _MAX_ 条记录过滤)",
                                            "sInfoPostFix": "",
                                            "sSearch": "模糊搜索:",
                                            "sUrl": "",
                                            "sEmptyTable": "表中数据为空",
                                            "sLoadingRecords": "载入中...",
                                            "sProcessing": "<img src='{% static 'assets/images/loding.gif'%}'/> 正在加载数据...",
                                            "sInfoThousands": ",",
                                            "oPaginate": {
                                                "sFirst": "首页",
                                                "sPrevious": "上页",
                                                "sNext": "下页",
                                                "sLast": "末页"
                                            }
                                        },
                                    });
                                    // Replace checkboxes when they appear
                                    var $state = $("#example-1 thead input[type='checkbox']");
                                    $("#example-1").on('draw.dt', function () {
                                        cbr_replace();
                                        $state.trigger('change');
                                    });
                                    // Script to select all checkboxes
                                    $state.on('change', function (ev) {
                                        var $chcks = $("#example-1 tbody input[type='checkbox']");
                                        if ($state.is(':checked')) {
                                            $chcks.prop('checked', true).trigger('change');
                                        }
                                        else {
                                            $chcks.prop('checked', false).trigger('change');
                                        }
                                    });
                                });
                            </script>
                            <table class="table table-bordered table-striped" id="example-1">
                                <thead>
                                <tr>
{#                                    <th class="no-sorting">#}
{#                                        <input type="checkbox" class="cbr">#}
{#                                    </th>#}
                                    <th></th>
                                    <th>游戏名称</th>
                                    <th>类型</th>
                                    <th>提交类型</th>
                                    <th>提交时间</th>
                                    <th>状态</th>
                                </tr>
                                </thead>
                                <tbody class="middle-align">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="profile">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <script type="text/javascript">
                                jQuery(document).ready(function ($) {
                                    $("#example-2").dataTable({
                                        dom: "t" + "<'row'<'col-xs-6'i><'col-xs-6'p>>",
                                        aLengthMenu: [
                                            [5, 25, 50, 100, -1], [10, 25, 50, 100, "All"]
                                        ],
                                        bProcessing: true,
                                        bPaginate: true,
                                        fnDraw: false,
                                        bLengthChange: true,
                                        bStateSave: false,
                                        bServerSide: true,
                                        sServerMethod: "POST",
                                        sAjaxSource: "{{ urls.query }}",
                                        fnServerParams: function (aoData) {
                                            aoData.push({'name': 'status', 'value': {{ Status.kRejected }}});
                                        },
                                        columns: [
{#                                            {#}
{#                                                bSortable: false, "render": function () {#}
{#                                                return '<input type="checkbox" class="cbr">';#}
{#                                            }#}
{#                                            },#}
                                            {"data": "index"},
                                            {"data": "name"},
                                            {"data": "category"},
                                            {
                                                "data": "", "render": function () {
                                                return "新游戏上传";
                                            }
                                            },
                                            {"data": "stime"},
                                            {
                                                "render": function () {
                                                return "打回";
                                            }
                                            },
                                            {"data": "last_auditor"},
                                            {"data": 'atime'},
                                            {
                                                "data": "id", "render": function (obj) {
                                                return '<a href="{{ urls.edit }}?id='+obj+'" class="btn btn-secondary btn-sm btn-icon">继续编辑</a>';
                                            }
                                            }
                                        ],
                                        language: {
                                            "sProcessing": "处理中...",
                                            "sLengthMenu": "每页显示 _MENU_ 条结果",
                                            "sZeroRecords": "没有匹配结果",
                                            "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 ,_TOTAL_条)",
                                            "sInfoEmpty": "显示第 0 至 0 条结果，共 0 条",
                                            "infoFiltered": "(从 _MAX_ 条记录过滤)",
                                            "sInfoPostFix": "",
                                            "sSearch": "模糊搜索:",
                                            "sUrl": "",
                                            "sEmptyTable": "表中数据为空",
                                            "sLoadingRecords": "载入中...",
                                            "sProcessing": "<img src='assets/images/loding.gif'/> 正在加载数据...",
                                            "sInfoThousands": ",",
                                            "oPaginate": {
                                                "sFirst": "首页",
                                                "sPrevious": "上页",
                                                "sNext": "下页",
                                                "sLast": "末页"
                                            }
                                        },
                                    });
                                    // Replace checkboxes when they appear
                                    var $state = $("#example-2 thead input[type='checkbox']");
                                    $("#example-2").on('draw.dt', function () {
                                        cbr_replace();
                                        $state.trigger('change');
                                    });
                                    // Script to select all checkboxes
                                    $state.on('change', function (ev) {
                                        var $chcks = $("#example-2 tbody input[type='checkbox']");
                                        if ($state.is(':checked')) {
                                            $chcks.prop('checked', true).trigger('change');
                                        }
                                        else {
                                            $chcks.prop('checked', false).trigger('change');
                                        }
                                    });
                                });
                            </script>
                            <table class="table table-bordered table-striped" id="example-2">
                                <thead>
                                <tr>
{#                                    <th class="no-sorting">#}
{#                                        <input type="checkbox" class="cbr">#}
{#                                    </th>#}
                                    <th></th>
                                    <th>游戏名称</th>
                                    <th>类型</th>
                                    <th>提交类型</th>
                                    <th>提交时间</th>
                                    <th>状态</th>
                                    <th>最后审核人</th>
                                    <th>打回时间</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody class="middle-align">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="messages">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <script type="text/javascript">
                                jQuery(document).ready(function ($) {
                                    $("#example-3").dataTable({
                                        dom: "t" + "<'row'<'col-xs-6'i><'col-xs-6'p>>",
                                        aLengthMenu: [
                                            [5, 25, 50, 100, -1], [10, 25, 50, 100, "All"]
                                        ],
                                        bProcessing: true,
                                        bPaginate: true,
                                        fnDraw: false,
                                        bLengthChange: true,
                                        bStateSave: false,
                                        bServerSide: true,
                                        sServerMethod: "POST",
                                        sAjaxSource: "{{ urls.query }}",
                                        fnServerParams: function (aoData) {
                                            aoData.push({'name': 'status', 'value': {{ Status.kCreated }}});
                                        },
                                        columns: [
{#                                            {#}
{#                                                bSortable: false, "render": function () {#}
{#                                                return '<input type="checkbox" class="cbr">';#}
{#                                            }#}
{#                                            },#}
                                            {"data": "index"},
                                            {"data": "name"},
                                            {"data": "category"},
                                            {
                                                "render": function () {
                                                return "草稿";
                                            }
                                            },
                                            {"data": "mtime"},
                                            {
                                                "data": "id", "render": function (obj) {
                                                return '<div><a href="{{ urls.edit }}?id='+obj+'" class="btn btn-secondary btn-sm btn-icon">继续编辑</a>' +
                                                        '<a href="{{ urls.delete }}?id='+obj+'" class="btn btn-danger btn-sm btn-icon icon-left">删除</a></div>';
                                            }
                                            }

                                        ],
                                        language: {
                                            "sProcessing": "处理中...",
                                            "sLengthMenu": "每页显示 _MENU_ 条结果",
                                            "sZeroRecords": "没有匹配结果",
                                            "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 ,_TOTAL_条)",
                                            "sInfoEmpty": "显示第 0 至 0 条结果，共 0 条",
                                            "infoFiltered": "(从 _MAX_ 条记录过滤)",
                                            "sInfoPostFix": "",
                                            "sSearch": "模糊搜索:",
                                            "sUrl": "",
                                            "sEmptyTable": "表中数据为空",
                                            "sLoadingRecords": "载入中...",
                                            "sProcessing": "<img src='assets/images/loding.gif'/> 正在加载数据...",
                                            "sInfoThousands": ",",
                                            "oPaginate": {
                                                "sFirst": "首页",
                                                "sPrevious": "上页",
                                                "sNext": "下页",
                                                "sLast": "末页"
                                            }
                                        },
                                    });
                                    // Replace checkboxes when they appear
                                    var $state = $("#example-3 thead input[type='checkbox']");
                                    $("#example-3").on('draw.dt', function () {
                                        cbr_replace();
                                        $state.trigger('change');
                                    });
                                    // Script to select all checkboxes
                                    $state.on('change', function (ev) {
                                        var $chcks = $("#example-3 tbody input[type='checkbox']");
                                        if ($state.is(':checked')) {
                                            $chcks.prop('checked', true).trigger('change');
                                        }
                                        else {
                                            $chcks.prop('checked', false).trigger('change');
                                        }
                                    });
                                });
                            </script>
                            <table class="table table-bordered table-striped" id="example-3">
                                <thead>
                                <tr>
{#                                    <th class="no-sorting">#}
{#                                        <input type="checkbox" class="cbr">#}
{#                                    </th>#}
                                    <th></th>
                                    <th>游戏名称</th>
                                    <th>类型</th>
                                    <th>状态</th>
                                    <th>最后修改</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody class="middle-align">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
{% endblock %}